<template>
<div class="page messageSetin-page" data-page="messageSetin" style="z-index: 2;">
        <div class="link-page-nav">
            <a href="#" class="link" @click="cancelEditCard">
                <i class="iconfont icon-zuo"></i>
            </a>
        </div>
        <!-- <div class="link-page-top" style="padding-bottom: 17px;">
            <div class="link-page-title">消息设置</div>
            <a href="#" class="link " @click="saveEditCard">
                <span class="iconfont icon-duigou"></span>
            </a>
        </div> -->
        <div class="page-content">
            <div class="list msgSet-parent" style="overflow: auto;height: calc(100% - 91px)">
                <ul id="msg_ul" class="msgSet-ul msgSet-ul-parent" data-parent="0">
                    <!-- {{#each allData}}
                    <li style="height: 60px">
                        <div class="item-inner item-msgSet-inner descDiv">
                            <div class="line"></div>
                            <div class="item-title desc" >{{this.name}}</div>
                            <label class="toggle toggle-init active" style="padding-right: 50px;width:50px">
                                <input {{#if this.status}}checked{{/if}} class="check-parent" data-checkboxid="{{this.objectTypeId}}" type="checkbox" name="msgcheckbox">
                                <span class="toggle-icon toggle-icon-top toggle-init-icon" style="height: 20px;width:50px"></span>
                            </label>
                            <span class="advice" style="display:none">不建议关闭</span>
                        </div>
                        <ul class="msgSet-ul msgSet-ul-children" style="display: none"  data-parent="msgSetLi-{{this.objectTypeId}}">
                            {{#each this.nodeMessageStatus}}
                            <li class="msgSet-li-children">
                                <label class="item-checkbox item-content label-children"  id="msgSetLi-{{this.objectTypeId}}">
                                <input {{#if this.status}}checked{{/if}} type="checkbox" class="check-children" data-checkboxid="{{this.objectTypeId}}" name="msgcheckbox"/>
                                <i class="icon icon-checkbox"></i>
                                <div class="item-inner item-msgSet-inner">
                                    <div class="item-title">{{this.name}}</div>
                                </div>
                                </label>
                            </li>
                            {{/each}}
                        </ul>
                    </li>
                    {{/each}} -->
                </ul>
            </div>
        </div>
</div>
</template>
<style scoped>
.msg-title{
    padding-right: 56px;   
}
.msgSet-parent{
    margin-top: 0px;
}
.item-inner.item-msgSet-inner:after{
    height: 0;
}
ul.msgSet-ul:after{
     background-color: transparent; 
}
ul.msgSet-ul .item-content{
    padding-left: 20px;
}
ul.msgSet-ul-parent>li{
    border-bottom: 1px solid rgba(0,0,0,.08); 
}
.toggle-icon-top::after{
    top:0px!important;    
}
.toggle-init-icon{
    background: #2471CA !important;
}
.toggle-init-icon:after{
    transform: translateX(30px)!important;
    background:#fff !important;
}
.toggle-init-icon2{
    background: rgba(178,178,178,1) !important;
}
.toggle-init-icon2:after{
    transform: translateX(0px)!important;
    background: #fff!important;
}
.desc{
    position: absolute;
    left: 20px;
    top: 18px;
    font-size: 17px;
    color: #333333;
    font-weight: bold;
}
.descDiv{
    padding-left:20px;
    min-height: 60px!important;
}
.advice{
    position: absolute;
    font-size: 12px;
    right: 13px;
    top: 41px;
    font-weight:normal;
    font-family:HiraginoSansGB-W3;
    color:rgba(241,110,13,1);
    transform: scale(.8,.8);
}
.toggle-init{
    width: 55px;
    background: #fff;
    border-radius: 13px;
    padding: 1px 1px;
    position: absolute;
    right: 20px;
    top: 14px;
}
.toggle-icon:after{
    height: 24px;
    width: 24px;
    border-radius: 20px;
    left: -4px;
}
</style>
<script>
    return {
        beforeCreate() {
            var self = this;
            self.getList();
        },
        data: function () {
            return {
                allData: []
            }
        },
        methods: {
            getList: function () {
                var self = this;
                var $ = self.$$;
                common.loading(1);
                Dao.getMsgPushStatusList({
                        userName:userInfor.accountName,
                        deviceId:appKeyObj.deviceId,
                        orgCode: platformCode || app.data.defaultPlatCode,
                  },function(data) {
                    self.allData  =data;
                    common.loading(0);
                },function(e) {
                    common.loading(0);
                    app.methods.showToastBottom("获取消息设置列表失败!");
                }, false);
            },
            saveEditCard: function () {
                var self = this;
                // 新数组和之前已经添加的数组不同
                if (!this.isEqual()){
                    common.loading(1);
                    let param={
                        userName:userInfor.accountName,
                        deviceId:appKeyObj.deviceId,
                        onStatusObjectIds:self.getCheckIds(2).toString(),
                        offStatusObjectIds:self.getCheckIds(3).toString()
                    }
                    Dao.updateMsgPushStatusBatch(param, function (data) {
                        common.loading(0);
                        app.methods.backToTab();
                        if(!localStorage.getItem(`${userInfor.accountName}_closeMsgSetTip`)){
                            if(!param.offStatusObjectIds){
                                $('.page-message').removeClass('show-msgSetNotice')
                            }else{
                                $('.page-message').addClass('show-msgSetNotice')
                            }
                        }
                    })
                } else {
                    app.methods.backToTab();
                }
            },
            isEqual :function(){//判断新老数组是否相等
                var self = this;
                if(self.getCheckIds(1).sort().toString()==self.getCheckIds(2).sort().toString()){
                    return true;
                }else{
                    return false;
                }
            },
            getCheckIds:function(oldOrCurrnet){
                var self = this;
                var oldcheckedArr =[];
                var currentcheckedArr =[];
                var currentUncheckedArr =[];
                if(oldOrCurrnet==1){//开始选中
                    for(let i=0;i<self.allData.length;i++){
                        if(self.allData[i].status==1){
                            oldcheckedArr.push(self.allData[i].id);
                        }
                        if(self.allData[i].nodeMessageStatus && self.allData[i].nodeMessageStatus.length>0){
                            for(let j=0;j<self.allData[i].nodeMessageStatus.length;j++){
                                if(self.allData[i].nodeMessageStatus[j].status==1){
                                    oldcheckedArr.push(self.allData[i].nodeMessageStatus[j].id);
                                }
                            }
                        }
                    }
                    return oldcheckedArr;
                }else if(oldOrCurrnet==2){//当前选中
                    jQuery.each($("input[name='msgcheckbox']"),function(index,obj){
                        if("checked" === jQuery(obj).attr("checked")){
                            currentcheckedArr.push(jQuery(obj).data('checkboxid'))
                        }
                    })
                    return currentcheckedArr;
                }else{//当前反选
                    jQuery.each($("input[name='msgcheckbox']"),function(index,obj){
                        if("checked" !== jQuery(obj).attr("checked")){
                            currentUncheckedArr.push(jQuery(obj).data('checkboxid'))
                        }
                    })
                    return currentUncheckedArr;
                }
            },
            cancelEditCard: function () {
                var self = this;
                //如果最终数组和开始不一样，则提示保存
                if (!this.isEqual()) {
                    /* self.openConfirm(); */
                    self.saveEditCard()
                } else {
                    app.methods.backToTab();
                }
            },
            openConfirm: function () {
                var app = this.$app;
                app.params.dialog.buttonCancel = "取消";
                app.params.dialog.buttonOk = `<span style='color:red;'>不保存</span>`;
                app.dialog.confirm("你修改的消息设置还未保存", "提示",
                    function () {
                        app.methods.backToTab();
                    }, function () {
                });
            },
            checkboxParentClick:function(e){
                let $t = e.currentTarget;
                let _status = $t.checked;
                var _id =  $t.dataset["checkboxid"];
                if(!_status){
                    jQuery("ul [data-parent='msgSetLi-"+_id+"']").find("input[type='checkbox']").prop("checked",false);
                }else{
                    jQuery("ul [data-parent='msgSetLi-"+_id+"']").find("input[type='checkbox']").prop("checked",true);
                }
            },
            checkboxChildClick:function(e){
                let $t = e.currentTarget;
                let _status = $t.checked;
                var _id =  $t.dataset["checkboxid"];
                var $ul_parent =jQuery($t).closest("ul.msgSet-ul-children");
                var allchecked = true;
                var $labels = $ul_parent.find("label.item-checkbox");
                var chcekedNum=0;
                jQuery.each($labels,function(index,obj){
                    let _sta = jQuery(obj).find("input[type='checkbox']")[0].checked;
                    if(!_sta){
                        allchecked =false;
                    }else{
                        chcekedNum++;
                    }
                })
                var pid_data = $ul_parent.attr("data-parent");
                if(allchecked && _status){//兄弟都选中,父是反选的>选中父
                    jQuery("#"+pid_data).find("input[type='checkbox']").prop("checked",true);
                }else{//选中的孩子个数为0>反选父
                    if(chcekedNum==0){
                        jQuery("#"+pid_data).find("input[type='checkbox']").prop("checked",false);
                    }
                }
            },
            drawData :function(){
                var self = this;
                if(self.allData.length === 0){
                    return;
                }
                var desc = ['应急救援类消息','消防设施警情类消息','应急救援类消息','高危信号类消息','重大问题类消息'];
                var arr1 = [];
                var arr2 = [];
                jQuery.each(self.allData,function(i,v){
                    if(jQuery.inArray(v.name,desc) >= 0){
                        arr1.push(v);
                    }else{
                        arr2.push(v);
                    }
                });
                self.allData = arr1.concat(arr2);
                var html = ``;
                for (let index = 0; index < self.allData.length; index++) {
                    var indexData = self.allData[index];
                    var status = indexData.status?'checked':'';
                    html += `<li style="height: 60px">
                                <div class="item-inner item-msgSet-inner descDiv">
                                    <div class="item-title desc" >`+indexData.name+`</div>
                                    <label class="toggle toggle-init active" style="padding-right: 50px;width:50px">
                                        <input `+status+` class="check-parent" data-checkboxid="`+indexData.objectTypeId+`" type="checkbox" name="msgcheckbox">
                                        <span class="toggle-icon toggle-icon-top toggle-init-icon" style="height: 25px;width:50px"></span>
                                    </label>
                                    <span class="advice" style="display:none">不建议关闭</span>
                                </div>
                                <ul class="msgSet-ul msgSet-ul-children" style="display: none"  data-parent="msgSetLi-`+indexData.objectTypeId+`">`;
                        if(indexData.nodeMessageStatus){
                            for (let x = 0; x < indexData.nodeMessageStatus.length; x++) {
                                var xData = indexData.nodeMessageStatus[x];
                                var xStatus = xData.status?'checked':'';
                                html += `<li class="msgSet-li-children">
                                            <label class="item-checkbox item-content label-children"  id="msgSetLi-`+xData.objectTypeId+`">
                                            <input `+xStatus+` type="checkbox" class="check-children" data-checkboxid="`+xData.objectTypeId+`" name="msgcheckbox"/>
                                            <i class="icon icon-checkbox"></i>
                                            <div class="item-inner item-msgSet-inner">
                                                <div class="item-title">`+xData.name+`</div>
                                            </div>
                                            </label>
                                        </li>`;
                            }
                        }
                        html += `</ul></li>`; 
                }
                jQuery('#msg_ul').html('').append(html);
            }
        },
        on: {
            pageInit:function(e,page){
                var self = this;
                self.drawData(); 
            },
            pageAfterIn: function (e, page) {
               //绑定父点击事件
                var self = this;
                jQuery(".check-parent").off().on('change', function(e){
                    // self.checkboxParentClick(e);
                });
                //绑定子点击事件
                jQuery(".check-children").off().on('change', function(e){
                    self.checkboxChildClick(e);
                });
                jQuery.each(jQuery(".check-parent"),function(i,v){
                    if("checked" !== jQuery(v).attr("checked")){
                        jQuery(v).next().removeClass("toggle-init-icon");
                        jQuery(e.target).parent(".toggle-init").addClass("active");
                    }
                    var desc = ['应急救援类消息','消防设施警情类消息','应急救援类消息','高危信号类消息','重大问题类消息'];
                    var target  = jQuery(v).parent();
                    if(jQuery.inArray(target.prev().html(),desc) >= 0){
                        target.parent().find(":last").show();
                    }

                });
                jQuery(".toggle-icon").off().on("click",function(e){
                    if("checked" !== jQuery(e.target).prev().attr("checked")){
                        jQuery(e.target).parent().parent().next("ul").find("input").prop("checked",true);
                        jQuery(e.target).parent().parent().next("ul").find("input").attr("checked",true);
                        
                        jQuery(e.target).prev().prop("checked",true);
                        jQuery(e.target).prev().attr("checked",true);
                        jQuery(e.target).addClass("toggle-init-icon");
                        jQuery(e.target).removeClass("toggle-init-icon2");
                        jQuery(e.target).parent(".toggle-init").addClass("active");
                    }else{
                        jQuery(e.target).parent().parent().next("ul").find("input").prop("checked",false);
                        jQuery(e.target).parent().parent().next("ul").find("input").removeAttr("checked");
                        jQuery(e.target).prev().prop("checked",false);
                        jQuery(e.target).prev().removeAttr("checked");
                        jQuery(e.target).removeClass("toggle-init-icon");
                        jQuery(e.target).addClass("toggle-init-icon2");
                        jQuery(e.target).parent(".toggle-init").removeClass("active");
                    }
                });
            }
    	}  
    }
</script>